<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .switch-box{
            font-size: 10px;
            display: inline-block;
            width: 8em;
            height: 4em;
            border-radius: 1000em;
            background-color: #ccc;
            background-color: #ff4949;
            box-shadow: 0 0 4px #8b2727 inset;
            cursor: pointer;
            user-select: none;
            transition: all 0.3s ease;
        }
        .switch-box.active{
            background-color: #13ce66;
            box-shadow: 0 0 4px #0c763b inset;
        }
        .switch-box>input[type=checkbox]{
            display: none;
        }
        .switch-box .pot{
            display: inline-block;
            width: 4em;
            height: 4em;
            background-color: white;
            border-radius: 50%;
            transform: scale(0.8);
            box-shadow: 0px 0px 4px #666;
            transition: all 0.3s ease;
        }
        .switch-box.active .pot{
            margin-left: 4em;
        }
    </style>
    <script src="../assets/js/vue.js"></script>
</head>
<body>

    <div id="app">
        <p>flag:{{ flag }}</p>
        <label class="switch-box" :class=" { 'active':flag } ">
            <input type="checkbox" v-model="flag">
            <span class="pot"></span>
        </label>
        <hr>
        <p>flag1:{{ flag1 }}</p>
        <my-swtich :flag=" flag1 " @update:flag=" setFlag1 " style="font-size:20px;"></my-swtich>
        <hr>
        <p>flag2:{{ flag2 }}</p>
        <my-swtich :flag=" flag2 " @update:flag=" setFlag2 " style="font-size:5px;"></my-swtich>
    </div>

    <script type="text/x-template" id="switch-btn">
        <label class="switch-box" :class=" { 'active':flag } ">
            <!-- <input type="checkbox" v-model="flag"> -->
            <input type="checkbox" :checked="flag" @change="upadteFlag( $event.target.checked )">
            <span class="pot"></span>
        </label>
    </script>

    <script>
        Vue.component("MySwtich",{
            template:"#switch-btn",
            // data() {
            //     return {
            //         flag:false
            //     }
            // },
            props:{
                flag:{
                    type:Boolean,
                    default:false
                }
            },
            methods: {
                upadteFlag(nv){
                    // console.log(nv)
                    this.$emit("update:flag",nv);
                }
            },
        })

        new Vue({
            el:"#app",
            data:{
                flag:false,
                flag1:false,
                flag2:true,
            },
            methods:{
                setFlag1(nv){
                    this.flag1 = nv;
                },
                setFlag2(nv){
                    this.flag2 = nv;
                }
            }
            
        })
    </script>
</body>
</html>